<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/index.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="headerbg">
    <div id="header">
        <div id="logotitle">
            <span id="headertitle">图书管理系统</span>
        </div>
        <div id="userDiv">
            <div id="userImg"><img></div>
            <div id="useName"></div>
            <button id="userInfo">修改信息</button>
            <button id="Logging_out">注销</button>
        </div>
    </div>
    <div>

    </div>
    <div id="userbg">
        <div id="user">
            <div id="userheader">用户修改：</div>
            <span>用户名</span><input type="text" id="use"></br>
            <span>头像地址</span><input type="text" id="userImgAddress"></br>
            <span>密码</span><input type="password" id="pwd"></br>
            <div id="twopwd">请在输入一次密码</div>
            <span>确认密码</span><input type="password" id="surepwd"></br>
            <button id="rightalter">确认修改</button>
            <button id="noalter">取消修改</button>
        </div>
    </div>
</div>
<div id="btnDiv">
    <button id="add">添加</button>
    <button id="refresh">刷新</button>
</div>
<table id="tab">
    <thead>
    <td id="imgTd">图片</td>
    <td id="bookNameTd">图书名称</td>
    <td id="authorTd">作者</td>
    <td id="priceTd">价格</td>
    <td id="addressTd">出版地址</td>
    <td id="dataTd">出版日期</td>
    <td id="addnumTd">出版编号</td>
    <td id="handler">操作</td>
    </thead>
    <tbody id="tby">

    </tbody>
</table>
<div id="bgdiv">
    <div id="addinfo">
        <div id="addLeft">
            <div>
                <span>图书名称</span>
                <input type="text" id="booknameInp">
            </div>
            <div>
                <span>作者</span>
                <input type="text" id="authorInp">
            </div>
            <div>
                <span>价格</span>
                <input type="text" id="priceInp">
            </div>
            <div>
                <span>会员价</span>
                <input type="text" id="vipPriceInp">
            </div>
            <div>
                <span>学生价</span>
                <input type="text" id="stuPriceInp">
            </div>
            <div>
                <span>数量</span>
                <input type="text" id="numberInp">
            </div>
        </div>
        <div id="addRight">
            <div>
                <span>页数</span>
                <input type="text" id="pageInp">
            </div>
            <div>
                <span>开数</span>
                <input type="text" id="normsInp">
            </div>
            <div>
                <span>出版社地址</span>
                <input type="text" id="addressInp">
            </div>
            <div>
                <span>图片地址</span>
                <input type="text" id="bookImgInp">
            </div>
            <div>
                <span>出版日期</span>
                <input type="text" id="dataInp">
            </div>
            <div>
                <span>出版编号</span>
                <input type="text" id="addnumInp">
            </div>
                <span id="spanBtn">
                    <button id="addBtnInp">添加</button>
                    <button id="offBtnInp">取消</button>
                    <button id="alterBtnInp">修改</button>

                </span>
        </div>
    </div>
</div>
</body>
    <script>
        var booksid;
//         删除函数清空列表
        function removeChildren(pnode){
        var childs=pnode.childNodes;
        for(var i=childs.length-1;i>=0;i--){
            pnode.removeChild(childs.item(i));
        }
    };

//        点击刷新按钮时执行点击函数
        $("#refresh").click(function(){
            ajaxHandler();

        });



        function ajaxHandler(){
            $.ajax({
                url:"http://localhost:8888/lsbooks",
                type:"get",
                success:function(data){
                    console.log(data);
//                    没次点击刷新按钮时要先执行清空函数removeChildren；
                    removeChildren(tby);
//                    再执行创建函数createHtml
                    createHtml(data);
                }
            })
        }



//        点击刷新的时候创建图书列表
        function createHtml(a) {
            for (var i = 0; i < a.length; i++) {
                var trs = $("<tr></tr>");
                trs.appendTo($("#tby"));
//                  创建图片的DOM操作
                var tds = $("<td></td>");
               var imgs=$("<img>");
                imgs.attr("src",a[i].image);
                imgs.appendTo(tds);
                tds.appendTo(trs);
//                  创建书名的DOM操作
                var tds2=$("<td></td>");
                tds2.html(a[i].bookname);
                tds2.appendTo(trs);
//                  创建作者的dom操作
                var tds3=$("<td></td>");
                tds3.html(a[i].author);
                tds3.appendTo(trs);
//                  创建价格的dom操作
                var tds4=$("<td></td>");
                tds4.html(a[i].piece);
                tds4.appendTo(trs);
//                  创建出版地址的dom操作
                var tds5=$("<td></td>");
                tds5.html(a[i].address);
                tds5.appendTo(trs);
//                  创建出版日期的dom操作
                var tds6=$("<td></td>");
                tds6.html(a[i].productdata);
                tds6.appendTo(trs);
//                  创建出版编号的dom操作
                var tds7=$("<td></td>");
                tds7.html(a[i].productnum);
                tds7.appendTo(trs);
//                  创建删除的dom操作
                var input1=$("<button>删除</button>");
                var tds8=$("<td></td>");
                input1.appendTo(tds8);
//                  创建修改的dom操作
                var input2=$("<button>修改</button>");
                input1.on("click",input1Handler);
                input2.on("click",input2Handler);
                input1.attr("dataIDs",a[i].id);
                input2.attr("dataIDs",a[i].id);
                input2.appendTo(tds8);
                tds8.appendTo(trs);

            }
        }



//        点击删除时需要执行的函数；
        function input1Handler (){
//            获取点击对象的id，同时需要用ajax向服务器发送删除请求
            var  t=this;
            console.log($(this).attr("dataIDs"));
            $.ajax({
                url:"http://localhost:8888/lsbooks/"+$(t).attr("dataIDs"),
                type:"delete",
                success:function(data){
                    t.parentNode.parentNode.remove();
                    console.log(this);
                }
            })
        }

//        点击修改的时候需要执行的函数
        function input2Handler(){

            $("#bgdiv").css("display","block");
            $("#addBtnInp").css("display","none");
//         通过ajax获取需要修改的图书信息 并且把信息展示在修改信息的模板上
            var that=this;
            console.log($(that).attr("dataIDs"));
            $.ajax({
                url:"http://localhost:8888/lsbooks/"+$(that).attr("dataIDs"),
                type:"get",
                success:function (data){
                    console.log($(that).attr("dataIDs"));
//                    展示模板的信息函数
                    alterbooks(data);
                }
            })
        }
        $("#offBtnInp").click(function(){
            $("#bgdiv ").css("display","none");
        })
//        展示信息模板的函数
        function alterbooks(c){
                $("#booknameInp").val(c.bookname);
                $("#authorInp").val(c.author);
                $("#priceInp").val(c.piece);
                $("#dataInp").val(c.productdata);
                $("#addressInp").val(c.address);
                $("#addnumInp").val(c.productnum);
                $("#bookImgInp").val(c.image);
                 booksid= c.id
        }
//        点击修改面板上修改按钮向服务器发送修改请求
        $("#alterBtnInp").on("click",function(){
            var bookobj={
                bookname: $("#booknameInp").val(),
                author:$("#authorInp").val(),
                piece:$("#priceInp").val(),
                productdata:$("#dataInp").val(),
                address:$("#addressInp").val(),
                productnum:$("#addnumInp").val(),
                image:$("#bookImgInp").val()

            };

            $.ajax({
                url:"http://localhost:8888/lsbooks/"+booksid,
                type:"put",
                data:bookobj,
                success:function(data){
                    console.log(data);
                    $("#bgdiv ").css("display","none");
                    removeChildren(tby);
//                    再执行创建函数createHtml
                    ajaxHandler()

                }
            })
        })



    </script>
</html>